<template>
	<view>
		<view class="title-con">
			<view class="title"></view>
			<view class="title">
				彩市场
			</view>
			<view class="fabu" @click="fabu">
				发布 
			</view>
		</view>
		<view class="xiaoming" v-for="(item,index) in list" :key="index">
			<view class="xiaoming-con">
				<view class="xiaoming-left">
					<view class="xiaoming-img">
						<img :src="item.img" alt="">
					</view>
					<view class="xiaoming-img-right">
						<view class="xiaoming-left-top">
							<p>{{item.name}}</p>
							<view class="xiaoming-left-top-img">
								<img src="./市场/cxy_22.png">
							</view>
						</view>
						<view class="time">
							2016-01-08 22:00
						</view>
					</view>
				</view>
				<view class="xiaoming-right">
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<view class="xiaoming-con-img">
				<view class="xiaoming-img-one" v-for="(items,index) in item.img1" :key="index">
					<img :src="items" alt="">
				</view>
			</view>
			<view class="xiaoming-bottom" @click="xiangqing">
				<view class="xiaoming-bottom-img">
					{{item.pin}}
				</view>
				<view class="xiaoming-bottom-p">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow() {
			this.cxycaishenghuo()
		},
		methods: {
			cxycaishenghuo() {
				this.$api.getcxycaishenghuo().then((res) => {
					res.data.map(item=>{
						item.img1 = item.img1.split(',')
					})
					this.list = res.data
				})
			},
			// 跳市场详情
			xiangqing() {
				uni.navigateTo({
					url: "/pages/questions/cxyxiangqing"
				})
			},
			// 发布
			fabu() {
				uni.navigateTo({
					url: '/pages/questions/cxyfabu'
				})
			}

		},
	}
</script>

<style lang="scss">
	.title-con {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #faab34;
		margin-top: 20upx;
	}

	.title {
		text-align: center;
		font-size: 40upx;
		margin-top: 4upx;


	}

	.fabu {
		text-align: center;
		font-size: 40upx;
		margin-top: 12upx;
		color: #faab34;
	}

	.xiaoming {
		width: 100%;
		height: 482upx;
		// background-color: blueviolet;
		// border-top: 1px solid #faab34;
		margin-top: 20upx;
		border-bottom: 1px solid #f2f2f2;
	}

	.xiaoming-con {
		width: 100%;
		height: 113upx;
		// background-color: red;
		display: flex;
	}

	.xiaoming-left {
		width: 50%;
		height: 100%;
		// background-color: yellow;
		display: flex;
	}

	.xiaoming-img {
		width: 95upx;
		height: 95upx;
		// background-color: brown;
		margin-top: 12upx;
		margin-left: 20upx;

	}

	.xiaoming-img img {
		width: 100%;
		height: 100%;
	}

	.xiaoming-left-top {
		width: 100%;
		height: 50upx;
		// background-color: paleturquoise;
		display: flex;
		margin-top: 20upx;
	}

	.xiaoming-left-top p {
		color: #666666;
	}

	.xiaoming-left-top-img {
		width: 56upx;
		height: 40upx;
		// background-color: brown;
		margin-top: 6upx;
		margin-left: 10upx;
	}

	.xiaoming-left-top-img img {
		width: 100%;
		height: 100%;
	}

	.xiaoming-img-right {
		width: 242upx;
		height: 100%;
		// background-color: plum;
		margin-left: 20upx;
	}

	.xiaoming-right {
		width: 50%;
		height: 100%;
		// background-color: pink;
		display: flex;
		justify-content: space-around;
	}

	.price {
		line-height: 110upx;
		color: #faab34;
		font-size: 40upx;

	}

	.time {
		line-height: 48upx;
		color: #666666;

	}

	.xiaoming-con-img {
		width: 100%;
		height: 250upx;
		// background-color: cyan;
		margin-top: 20upx;
		display: flex;
	}

	.xiaoming-img-one {
		width: 33%;
		height: 100%;
		
		// background-color: red;
	}

	.xiaoming-img-one img {
		width: 100%;
		height: 100%;
		
	}

	.xiaoming-bottom {
		width: 100%;
		height: 98upx;
		// background-color: palevioletred;
		display: flex;
		justify-content: space-around;
		margin-top: 20upx;
	}

	.xiaoming-bottom-img {
		width: 110upx;
		height: 50upx;
		// background-color: peru;
		background-image: url('./市场/cxy_23.png');
		background-size: 82%;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		color: #fff;
		font-size: 20upx;
		line-height: 46upx;
		margin-top: 20upx;
	}

	.xiaoming-bottom-p {
		width: 578upx;
		height: 100%;
		// background-color: palegreen;
		font-size: 28upx;
	}
</style>
